import React, { useState } from 'react'
import { Select, Row, Col } from 'antd';
import { Link } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import ChooseLanguage from '../Language/language';
import { USER_TOKEN } from 'Common/common'
import './nav.scss'
const { Option } = Select;
const headerLogo = require('assets/header/herderLogo.png')
interface userInfo {
    name: string
}
interface Iprops {
    anchorEvent: (anchorName: string) => void,
    userInfo?: userInfo,
}
function Nav(props: Iprops) {
    const { t } = useTranslation();
    const { anchorEvent } = props;
    const [userInfo] = useState<string>(localStorage.getItem(USER_TOKEN) || '')
    return (
        <nav className='nav-pc'>
            <div className='upload-box'>
                <div onClick={() => {
                    anchorEvent('contactUs')
                }}>
                    <img src={headerLogo} alt="logo" className='logoImg' />
                    <span>
                        {
                            t('download')
                        }
                    </span>
                </div>
            </div>
            <div className="login_language">
                <div className='switch-language-box'>
                    <ChooseLanguage isPhone={false} />
                </div>
                {
                    !userInfo ? <Link className='loginBtn' to="/myatlaslibrary">
                        {/* !userInfo ? <Link className='loginBtn' to="/login"> */}
                        {
                            t("login")
                        }
                    </Link> : ''
                }   
            </div>

        </nav>
    )
}

export default Nav
